<template>
  <div class="merchanthome">
    <el-row class="search-box">
      <el-col :span="24">
        <label for="" class="choose">
          <span>分类名称：</span>
          <el-input v-model="form.name" placeholder="请输入名称" size="small" class="select-box padding-b15" :maxlength="50"></el-input>
        </label>
        <label for="" class="choose">
          <el-button icon="search" type="primary" size="small" @click="search" v-resetClick>搜索</el-button>
        </label>
       </el-col>
    </el-row>
    <div class="title">
      <el-button class="titleright" icon="document" type="primary" @click="goAdd()" v-resetClick size="small">新增</el-button>
    </div>
    <el-row class="box-thead">
      <ctable :isLoading="isLoading" ref="tableselect" :statusNum="10" @selectData="handleSelectionChange" :thead="thead" :options="options" :table-data="lists" :page-data="pageObj" :opt-width="200" all-align="center"></ctable>
    </el-row>
    <el-dialog :title="ruleForm.id ? '编辑分类' : '新增分类'" :visible.sync="isDialogShow" :show-close="false" :destroy-on-close="true" :close-on-click-modal="false" width="40%" custom-class="customWidth">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
        <el-form-item label="分类名称:" :label-width="formLabelWidth" prop="name">
          <el-input v-model="ruleForm.name" autocomplete="off" style="width: 350px;" placeholder="请输入分类名称"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="submitForm('ruleForm', 2)">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm', 1)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {materialclasslist, materialclassdel, materialclassupdate, materialclassadd} from 'api/txEquipment/index'
import ctable from 'components/common/ctable'
import { vueTimeFormat } from 'src/filter/index'
export default {
  data () {
    return {
      isDialogShow: false,
      formLabelWidth: '120px',
      ruleForm: {
        name: ''
      },
      form: {
        name: ''
      },
      formObj: {},
      rules: {
        name: [
          { required: true, message: '请输入分类名称', trigger: 'blur' }
        ]
      },
      checkedArr: [],
      thead: [{
        name: '分类名称',
        prop: 'name'
      },
      {
        name: '创建时间',
        prop: 'created'
      }
      ],
      options: [{
        name: '编辑',
        callback: this.edit
      }, {
        name: '删除',
        callback: this.delEvemt
      }
      ],
      lists: [],
      pageObj: { // 分页
        page: {totalCount: 0},
        callback: this.getData
      },
      idsdoor: true,
      Templatelist: [],
      platformSource: 2 // 来源渠道
    }
  },
  created () {
    this.filterObjEvemt()
  },
  methods: {
    submitForm (formName, num) {
      if (num === 1) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.ruleForm.id) {
              materialclassupdate(this.ruleForm).then(res => {
                this.$message({
                  message: '编辑成功',
                  type: 'success'
                })
                this.isDialogShow = false
                this.getData(1)
              })
            } else {
              materialclassadd(this.ruleForm).then(res => {
                this.$message({
                  message: '添加成功',
                  type: 'success'
                })
                this.isDialogShow = false
                this.getData(1)
              })
            }
          }
        })
      } else {
        this.$refs[formName].resetFields()
        this.isDialogShow = false
      }
    },
    vueTimeFormats (row, col, value) {
      return vueTimeFormat(value, 'yyyy-MM-dd hh:mm:ss')
    },
    goAdd () {
      this.ruleForm = {
        name: ''
      }
      this.isDialogShow = true
    },
    search () {
      this.filterObjEvemt()
    },
    filterObjEvemt () {
      let obj = {}
      for (const key in this.form) {
        if (this.form[key] === '' || this.form[key] === null || this.form[key] === undefined) continue
        switch (key) {
          case 'remarks8888':
            obj[key] = this.form[key]
            break
          default:
            obj[key] = this.form[key]
            break
        }
      }
      this.formObj = JSON.parse(JSON.stringify(obj))
      this.getData(1)
      return obj
    },
    edit (obj) {
      this.ruleForm = {
        id: obj.id,
        name: obj.name || null
      }
      this.isDialogShow = true
    },
    // 删除
    delEvemt (data) {
      this.$confirm(`是否删除 ${data.name} ？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        materialclassdel({id: data.id}).then(res => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.getData(1)
        })
      }).catch(() => {
      })
    },
    getData (num) {
      materialclasslist({
        pageSize: 10,
        pageIndex: num - 1,
        ...this.formObj
      }).then(res => {
        this.lists = res.data || []
        this.pageObj.page = res.page
      })
    }
  },
  components: {
    ctable
  }
}
</script>
<style lang='less'>
.merchanthome {
  /deep/ .customWidth{
    min-width: 560px;
  }
  .title {
    overflow: hidden;
    padding: 16px 20px;
    padding-bottom: 0;
  }
  .search-box {
    padding: 20px 30px;
    background: #ffffff;
    .choose {
      margin-right: 10px;
      .select-box {
        width: 150px;
      }
    }
  }
  .box-thead{
    padding: 10px 30px;
  }
  .template-dialog {
    .el-dialog__header {
      background: #20a0ff;
      padding-top: 15px;
    }
    .el-dialog__title {
      color: #fff;
    }
  }
  .code-dialog {
    .el-dialog__header {
      background: #20a0ff;
      padding: 10px 20px;
    }
    .el-dialog__title {
      font-size: 18px;
      color: #fff;
      font-weight: 700
    }
    .el-dialog__headerbtn {
      top: 10px;
      font-size: 24px;
    }
    .el-dialog__headerbtn .el-dialog__close {
      color: #fff;
    }
    .el-dialog__body {
      padding: 0;
    }
    .code-big {
      display: block;
      width: 500px;
      height: 500px;
      margin: 0 auto;
    }
  }
  .updateBox {
    position: absolute;
    bottom: 10px;
    left: 34px;
    .el-button {
      margin-left: 16px;
    }
  }
  .audit{
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    // position: relative;
  }
  .auditsuc{
    color: rgb(49, 230, 58);
  }
  .auditerr{
    color: rgb(245, 68, 68);
    position: relative;
  }
  .auditing{
    color: rgb(241, 173, 24);
  }
  .unaudit{
    color: rgb(48, 50, 51);
  }
  .auditerrhover{
    width: 100%;
    height: 57px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
  .auditerrhover{
    position: relative;
  }
  .auditerrhover:hover.auditerrhover .cell{
    position: absolute;
    width: 280px;
    height: 150px;
    background: #ffffff;
    opacity: 0.8;
    transform: translateX(-100px) translateY(-75px);
    border-radius: 10px;
    border: #20a0ff 1px solid;
    z-index: 999;
  }
  .checkedtip{
    display: inline-block;
    margin-left: 12px;
    margin-top: 6px;
  }
  .titleright{
    float: right;
    margin-left: 20px;
  }
}
</style>
